<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
 <script>
	 $(function(){
		$('a').hover(
			function(){
				$(this).stop().animate({"width":"160px"}, 200);
			},
			function(){
				$(this).stop().animate({"width":"120px"}, 200);	
			});
	 })
 </script>
 <!--
 <script>
 	window.onload=function() {
		var aA = document.getElementsByTagName('a');
		for (var i = 0; i < aA.length; i++) {		
			aA[i].onmouseover = function(){
				var This = this;
				This.time = setInterval(function(){
					This.style.width = This.offsetWidth+8+"px";
					if(This.offsetWidth >= 160) {
						clearInterval(This.time);
					}
				}, 30);
			}
			
			aA[i].onmouseout = function() {
				var This = this;
				clearInterval(This.time);	
				This.time = setInterval(function(){
					This.style.width = This.offsetWidth-8+"px";
					if (This.offsetWidth <= 120) {
						This.offsetWidth = "120px";
						clearInterval(This.time);	
					}
				});
			};
		}
	}
 </script>
 -->
	<style>
*{margin:0; padding:0; font-size:14px;}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left;}
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;
	color:#333;text-decoration:none;background-color:#ccc;}
.nav li a:hover{color:#fff; background-color:#f60;}
   </style>
</head>
    
    <body>
     	<ul class="nav">
         <li><a href="#" class="on">首   页</a></li>
         <li><a href="#">新闻快讯</a></li>
         <li><a href="#">产品展示</a></li>
         <li><a href="#">联系我们</a></li>
      </ul>
    </body>
</html>
